<template>
    <div class="out_box">
        <div class="relative content_box">
            <div class="title_box" v-if="userDATA.certification === '0'">
                <h2 class="title bold">用户信息实名登记</h2>
                <div class="mt_30 mb_30">
                    <span>我的账号ID</span>
                    <span class="ml_40">{{ userDATA.memberid }}</span>
                </div>
                <p class="tips font_theme">为了您的账户资金安全，请您登记实名认证信息。请注意，信息一经登记则无法修改，之后办理提现，账号验证等业务信息必须与登记信息相符，请务必如实填写。</p>
            </div>
            <div class="tab_box" v-if="userDATA.certification === '0'">
                <v-tabs active-tab-key="1" type="card" @tab-click="toggleTabs">
                    <v-tab-pane tab-key="1" tab="身份证">
                        <div class="form_box basic_form">
                            <v-form direction="horizontal">
                                <v-form-item class="border" label="姓名" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <v-input class="input" placeholder="请输入您的真实姓名" v-model="dataForm1.userName"></v-input>
                                </v-form-item>
                                <v-form-item class="border" label="身份证号码" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <v-input class="input" placeholder="请输入您的真实证件号码" v-model="dataForm1.cardNumber"></v-input>
                                </v-form-item>
                                <v-form-item class="border" label="身份证国徽面" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <div class="upload_box pointer">
                                        <v-upload :action="''" @change="onChangeID1" accept="image/jpeg,image/png">
                                            <div class="content">
                                                <span class="icon">
                                                    <i class="iconfont">&#xe605;</i>
                                                </span>
                                                <p class="text">上传身份证国徽面照片</p>
                                                <!-- <p v-show="dataForm1.hasFiles[0]">{{ dataForm1.fileList[0].name }}</p> -->
                                                <img id="upload1_0" class="upload_img none" src="" />
                                            </div>
                                        </v-upload>
                                    </div>
                                    <div class="demo_box">
                                        <p class="text">示例</p>
                                        <img class="img" src="@assets/imgs/personal/ID_1.jpg" />
                                    </div>
                                    <p class="tips">{{ uploadText }}</p>
                                </v-form-item>
                                <v-form-item class="border" label="身份证头像面" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <div class="upload_box pointer">
                                        <v-upload :action="''" @change="onChangeID2" accept="image/jpeg,image/png">
                                            <div class="content">
                                                <span class="icon">
                                                    <i class="iconfont">&#xe605;</i>
                                                </span>
                                                <p class="text">上传身份证头像面照片</p>
                                                <!-- <p v-show="dataForm1.hasFiles[1]">{{ dataForm1.fileList[1].name }}</p> -->
                                                <img id="upload1_1" class="upload_img none" src="" />
                                            </div>
                                        </v-upload>
                                    </div>
                                    <div class="demo_box">
                                        <p class="text">示例</p>
                                        <img class="img" src="@assets/imgs/personal/ID_2.jpg" />
                                    </div>
                                    <p class="tips">{{ uploadText }}</p>
                                </v-form-item>
                                <v-form-item class="border" label="身份证手持照" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <div class="upload_box pointer">
                                        <v-upload :action="''" @change="onChangeID4" accept="image/jpeg,image/png">
                                            <div class="content">
                                                <span class="icon">
                                                    <i class="iconfont">&#xe605;</i>
                                                </span>
                                                <p class="text">上传手持身份证全景照片</p>
                                                <!-- <p v-show="dataForm1.hasFiles[2]">{{ dataForm1.fileList[2].name }}</p> -->
                                                <img id="upload1_2" class="upload_img none" src="" />
                                            </div>
                                        </v-upload>
                                    </div>
                                    <div class="demo_box">
                                        <p class="text">示例</p>
                                        <img class="img" src="@assets/imgs/personal/people_demo.jpg" />
                                    </div>
                                    <p class="tips">{{ uploadText }}</p>
                                </v-form-item>
                                <v-form-item class="" label=" " :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <v-button class="btn" type="primary" size="large" @click="pushData()">提交</v-button>
                                </v-form-item>
                            </v-form>
                        </div>
                    </v-tab-pane>
                    <v-tab-pane tab-key="2" tab="海外护照">
                        <div class="form_box basic_form">
                             <v-form direction="horizontal">
                                <v-form-item class="border" label="姓名" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <v-input class="input" placeholder="请输入您的真实姓名" v-model="dataForm2.userName"></v-input>
                                </v-form-item>
                                <v-form-item class="border" label="护照号码" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <v-input class="input" placeholder="请输入您的真实证件号码" v-model="dataForm2.cardNumber"></v-input>
                                </v-form-item>
                                <v-form-item class="border" label="护照头像页" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <div class="upload_box pointer">
                                        <v-upload :action="''" @change="onChangeID1" accept="image/jpeg,image/png">
                                            <div class="content">
                                                <span class="icon">
                                                    <i class="iconfont">&#xe605;</i>
                                                </span>
                                                <p class="text">上传护照头像面照片</p>
                                                <!-- <p v-show="dataForm2.hasFiles[0]">{{ dataForm2.fileList[0].name }}</p> -->
                                                <img id="upload2_0" class="upload_img none" src="" />
                                            </div>
                                        </v-upload>
                                    </div>
                                    <div class="demo_box">
                                        <p class="text">示例</p>
                                        <img class="img" src="@assets/imgs/personal/passport_2.jpg" />
                                    </div>
                                    <p class="tips">{{ uploadText }}</p>
                                </v-form-item>
                                <v-form-item class="border" label="护照封面" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <div class="upload_box pointer">
                                        <v-upload :action="''" @change="onChangeID2" accept="image/jpeg,image/png">
                                            <div class="content">
                                                <span class="icon">
                                                    <i class="iconfont">&#xe605;</i>
                                                </span>
                                                <p class="text">上传封面照片</p>
                                                <!-- <p v-show="dataForm2.hasFiles[1]">{{ dataForm2.fileList[1].name }}</p> -->
                                                <img id="upload2_1" class="upload_img none" src="" />
                                            </div>
                                        </v-upload>
                                    </div>
                                    <div class="demo_box">
                                        <p class="text">示例</p>
                                        <img class="img" src="@assets/imgs/personal/passport_1.jpg" />
                                    </div>
                                    <p class="tips">{{ uploadText }}</p>
                                </v-form-item>
                                <v-form-item class="border" label="护照手持照" :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <div class="upload_box pointer">
                                        <v-upload :action="''" @change="onChangeID4" accept="image/jpeg,image/png">
                                            <div class="content">
                                                <span class="icon">
                                                    <i class="iconfont">&#xe605;</i>
                                                </span>
                                                <!-- <p class="text">上传手持护照全景照片</p> -->
                                                <p v-show="dataForm2.hasFiles[2]">{{ dataForm2.fileList[2].name }}</p>
                                                <img id="upload2_2" class="upload_img none" src="" />
                                            </div>
                                        </v-upload>
                                    </div>
                                    <div class="demo_box">
                                        <p class="text">示例</p>
                                        <img class="img" src="@assets/imgs/personal/people_demo.jpg" />
                                    </div>
                                    <p class="tips">{{ uploadText }}</p>
                                </v-form-item>
                                <v-form-item class="" label=" " :label-col="labelCol" :wrapper-col="wrapperCol">
                                    <v-button class="btn" type="primary" size="large" @click="pushData()">提交</v-button>
                                </v-form-item>
                            </v-form>
                        </div>
                    </v-tab-pane>
                </v-tabs>
            </div>
            <div class="card_box relative" v-else>
                <h2 class="title bold mb_30">我的实名信息</h2>
                <img class="img" :src="resultForm.img" />
                <div class="text_box">
                    <div class="list">
                        <span class="title">我的账号ID</span>
                        <span class="text">{{ resultForm.memberid }}</span>
                    </div>
                    <div class="list">
                        <span class="title">姓名</span>
                        <span class="text">{{ resultForm.userName }}</span>
                    </div>
                    <div class="list">
                        <span class="title">证件号码</span>
                        <span class="text">{{ resultForm.cardNumber || '暂无' }}</span>
                    </div>
                    <div class="list">
                        <span class="title">认证时间</span>
                        <span class="text">{{ resultForm.updateTime }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { pushIdentityInfo } from '@doapis/auth/auth.js';

    let fileMaxSize = 2048;
    let formData = new FormData();

    export default {
        name: "Authentication",
        data: function() {
            return {
                dataForm1: {
                    userName: '',
                    cardNumber: '',
                    hasFiles: [],
                    fileList: [{}, {}, {}, {}]
                },
                dataForm2: {
                    userName: '',
                    cardNumber: '',
                    hasFiles: [],
                    fileList: [{}, {}, {}, {}]
                },
                formType: '1',
                uploadText: '请保证证件上的信息清晰可见，不允许做任何修改和遮挡，图片大小不超过2M（如果想修改图片，点击原来的图片即可更换）。',
                resultForm: {},
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 16
                },
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                userDATA.updateTime = $.$getFormatMD(userDATA.updateTime, true);
                return userDATA;
            }
        },
        methods: {
            getData: function() {
                
            },
            pushData: function() {
                const that = this;
                const isID = that.formType === '1';
                const dataForm = that['dataForm' + that.formType];
                let tipsText = '';

                if (!dataForm.userName) {
                    tipsText = '请输入您的真实姓名！！';
                } else if (!$.$testID(dataForm.cardNumber)) {
                    tipsText = '请输入准确的身份证号！！';
                } else if (!dataForm.hasFiles[0] || !dataForm.hasFiles[1] || !dataForm.hasFiles[2]) {
                    tipsText = '请选择您的身份证国徽面、身份证头像面、身份证手持照！！';
                }

                if (tipsText) {
                    that.error(tipsText);
                } else {
                    formData.set('userName', dataForm.userName);
                    formData.set('cardNumber', dataForm.cardNumber);
                    formData.set('memberid', that.userDATA.memberid);
                    formData.set('formtype', isID ? 'identitycard' : 'overseas');
                    pushIdentityInfo({
                        // data: {
                        //     userName: dataForm.userName,
                        //     cardNumber: dataForm.cardNumber,
                        //     fils: dataForm.fileList,
                        //     memberid: that.userDATA.memberid
                        // },
                        // contentType: 'multipart/form-data',
                        data: formData,
                        contentType: false,
                        processData: false,
                        alertError: true
                    }).then(function(res) {
                        if (res.success) {
                            that.$store.commit({
                                type: 'pushUserData',
                                userDATA: { certification: res.data.certification }
                            });
                            that.$modal.success({
                                title: '操作成功！！',
                                content: '资料上传成功，请耐心等待审核结果！！',
                                onOk: function() {
                                    window.location.reload();
                                }
                            });
                        }
                    });
                }
            },
            toggleTabs: function(val) {
                this.formType = val;
            },
            onChangeID1: function(detail) {
                this.uploadFile(detail, '0');
            },
            onChangeID2: function(detail) {
                this.uploadFile(detail, '1');
            },
            onChangeID4: function(detail) {
                this.uploadFile(detail, '2');
            },
            uploadFile: async function(detail, index) {
                const file = detail.file;
                if (file.status !== 'uploading' && !file.error && file.uid && file.size) {
                    if (file.size / 4094 > fileMaxSize) {
                        this.error('您的文件过大，请压缩或更换文件！！');
                    } else {
                        formData.set('fils[' + index + ']', file, this.userDATA.memberid + '_0' + (Number(index) + 1));
                        
                        this.$set(this['dataForm' + this.formType].fileList, index, detail.file);
                        this.$set(this['dataForm' + this.formType].hasFiles, index, true);
                        $('#upload' + this.formType + '_' + index).attr('src', await $.$imgToBase64(file)).fadeIn();
                    }
                }
            },
            error: function(msg) {
                this.$notification.error({
                    message: '操作错误！！',
                    description: msg
                });
            }
        },
        mounted: function() {
            const certification = this.userDATA.certification;
            let certificationDATA = {};

            if (certification === '2') {
                const { memberid, userName, cardNumber, updateTime } = this.userDATA;
                certificationDATA = { memberid, userName, cardNumber, updateTime, img: require('@assets/imgs/personal/verification_success.png') };
            } else if (certification === '1') {
                const text = '等待审核';
                certificationDATA = {
                    memberid: text,
                    userName: text,
                    cardNumber: text,
                    updateTime: text,
                    img: require('@assets/imgs/personal/verification_doing.png')
                };
            }
            this.$set(this, 'resultForm', certificationDATA);
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .content_box{
        padding: 25px 35px;
        background-color: white;
        .title_box{
            font-size: 13px;
            margin-bottom: 50px;
        }
        .tab_box{
            /deep/ .ant-switch-checked{
                border-color: #29cc00;
                background-color: #29cc00;
            }
            /deep/ .ant-tabs-tab, /deep/ .ant-tabs-bar{
                margin-bottom: 0;
                border: none;
                background-color: #f9f9f9;
            }
            /deep/ .ant-tabs-tab{
                width: 130px;
                padding: 16px;
                text-align: center;
                border-top: 4px solid white;
                border-radius: 0;
            }
            /deep/ .ant-tabs-tab-active{
                .font_black;
                background: white;
                border-color:  blue;
            }
            /deep/ .ant-tabs-nav{
                width: 100%;
            }
            .form_box{
                /deep/ .ant-form-item-label{
                    max-width: 160px;
                }
                /deep/ .ant-form-item{
                    padding: 20px 0;
                }
                .input{
                    height: 34px;
                }
                .upload_box{
                    display: inline-block;
                    margin-right: 40px;
                    border: 2px solid black;
                    border-radius: 8px;
                    vertical-align: text-bottom;
                    .content{
                        width: 220px;
                        height: 160px;
                        display: inline-flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                        position: relative;
                        .upload_img{
                            position: absolute;
                            top: 2px;
                            bottom: 2px;
                            right: 2px;
                            left: 2px;
                            z-index: 4;
                            width: 100%;
                            height: 100%;
                            padding: 0 4px 4px 0;
                            box-sizing: border-box;
                            border-radius: 8px;
                            cursor: pointer;
                        }
                    }
                    .icon{
                        width: 30px;
                        height: 30px;
                        display: inline-block;
                        line-height: 30px;
                        .font_gray;
                        border: 3px solid @color_gray;
                        border-radius: 50%;
                        .iconfont{
                            font-size: 26px;
                        }
                    }
                    .text{
                        font-size: 13px;
                        color: #CCC;
                    }
                }
                .demo_box{
                    width: 110px;
                    height: 160px;
                    display: inline-flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    border: 2px solid black;
                    border-radius: 8px;
                    vertical-align: text-bottom;
                    .text{
                        font-size: 13px;
                        color: #CCC;
                    }
                    .img{
                        width: 60px;
                    }
                }
                .tips{
                    font-size: 13px;
                    .font_gray;
                }
                .btn{
                    width: 180px;
                    height: 36px;
                    text-align: center;
                    border-radius: 34px;
                    box-sizing: border-box;
                    .theme_linear_ellipsis_btn;
                }
            }
        }
        .card_box{
            .list{
                font-size: 13px;
                line-height: 34px;
                .title{
                    display: inline-block;
                    width: 100px;
                    margin-right: 30px;
                }
            }
            .img{
                width: 80px;
                height: 80px;
                position: absolute;
                right: 40px;
                bottom: 50%;
                margin-bottom: -40px;
            }
        }
    }
</style>
